<template>
  <div class="cparkCardManagement-page">
    <div class="table-container" style="margin-top: 0px">
      <OrderDetails :orderDetails="list.data" />
    </div>
    <div class="table-container">
      <PictureDetails :orderDetails="table.data" />
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="pagination.pageSizes"
          layout="total,sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="table-container">
      <PaymentDetails :orderDetails="list.data" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import OrderDetails from "./orderDetails.vue";
import PictureDetails from "./pictureDetails.vue";
import PaymentDetails from "./paymentDetails.vue";
import { getDetailList, getPaymentRecords } from "../request.js";
const emits = defineEmits(["operationDone"]);

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
});

const list = reactive({
  data: {},
});

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

const init = async () => {
  await getDetailList(props.operationId.id).then((res) => {
    // console.log(res);
    list.data = res.data.result;
  });
};

const getData = async () => {
  table.loading = true;
  await getPaymentRecords({
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
    cardId: props.operationId.id,
  }).then((res) => {
    console.log(res);
    if (res.data.code === 0) {
      table.data = res.data.result.items;
      table.total = parseInt(res.data.result.total);
      table.loading = false;
    }
  });
};
getData();
init();
</script>

<style lang="less" scoped>
.table-container {
  margin-top: 16px;
  min-height: 100%;
  // padding: 24px;
  background: #fff;
  border-radius: 6px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
